<script setup>
import { ref, reactive } from "vue"
import singer from "./components/singer.vue"
import taplist from "./components/taplist.vue";
import tab from "./components/tab.vue";
// 创建一个变量表示选项卡的状态
const changebtn = ref(0) //0表示明星，1表示歌曲

const singers = reactive([
{
  name:"薛之谦",
  img:"/public/images/xue.jpg",
  progress:"12138",
  rank:"1"
},
{
  name:"蔡徐坤",
  img:"/public/images/1.jpg",
  progress:"1717",
  rank:"2"
},
{
  name:"蔡徐坤",
  img:"/public/images/3.jpg",
  progress:"337",
  rank:"3"
}
])

// 获取最大热度
const maxProgress = singers[0].progress

const musics =reactive([
{
  name:"《只因你太美》",
  img:"/public/images/kun.png",
  progress:"2138",
  rank:"1"
},
{
  name:"《绅士》",
  img:"/public/images/shenshi.jpg",
  progress:"1717",
  rank:"2"
},
{
  name:"《Hug me》",
  img:"/public/images/kun.png",
  progress:"337",
  rank:"3"
}
])

const maxmusic = musics[0].progress


</script>
<template>
    <tab>
        <template #0>
          <taplist :list="singers" :hotlist="maxProgress"></taplist>
        </template>
        <template #1>
          <taplist :list="musics" :hotlist="maxmusic"></taplist>
        </template>
    </tab>
</template>
